<!--
 *
 * 　　┏┓　　　┏┓+ +
 * 　┏┛┻━━━┛┻┓ + +
 * 　┃　　　　　　　┃
 * 　┃　　　━　　　┃ ++ + + +
 *  ████━████ ┃+
 * 　┃　　　　　　　┃ +
 * 　┃　　　┻　　　┃
 * 　┃　　　　　　　┃ + +
 * 　┗━┓　　　┏━┛
 * 　　　┃　　　┃
 * 　　　┃　　　┃ + + + +
 * 　　　┃　　　┃
 * 　　　┃　　　┃ +  神兽保佑
 * 　　　┃　　　┃    代码无bug
 * 　　　┃　　　┃　　+
 * 　　　┃　 　　┗━━━┓ + +
 * 　　　┃ 　　　　　　　┣┓
 * 　　　┃ 　　　　　　　┏┛
 * 　　　┗┓┓┏━┳┓┏┛ + + + +
 * 　　　　┃┫┫　┃┫┫
 * 　　　　┗┻┛　┗┻┛+ + + +
 *
 *
 * @Descripttion:
 * @version:
 * @Date: 2022-03-16 13:46:18
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-03-16 17:31:26
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
 -->
<template>
  <drawer-frame
    :title="`${user.name ? '编辑' : '创建'}${
      listType === 'WHITE' ? '白' : '黑'
    }名单`"
    @close="$emit('close')"
    @submit="handleSubmit"
  >
    <el-form ref="form" :model="model" :rules="rules" label-width="80px">
      <el-form-item label="名称" prop="name">
        <el-input v-model="model.name" placeholder="名称"></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="switch">
        <el-radio-group v-model="model.switch">
          <el-radio-button label="number">手机号</el-radio-button>
          <el-radio-button label="range">号码段</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="model.switch === 'number'"
        key="1"
        label="手机号"
        prop="numbers"
      >
        <el-input
          v-model="model.numbers"
          type="textarea"
          placeholder="手机号"
          :rows="4"
        ></el-input>
      </el-form-item>
      <el-form-item
        v-if="model.switch === 'range'"
        key="2"
        label="号码段"
        prop="range"
        :required="true"
      >
        <div class="range">
          <el-input
            v-model="model.range.start"
            class="input"
            placeholder="开始号码"
          ></el-input>
          <span style="margin: 0 4px">~</span>
          <el-input
            v-model="model.range.end"
            class="input"
            placeholder="结束号码"
          ></el-input>
        </div>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          v-model="model.remark"
          type="textarea"
          placeholder="备注"
          :rows="4"
        ></el-input>
      </el-form-item>
    </el-form>
  </drawer-frame>
</template>
<script>
export default {
  props: {
    listType: {
      type: String,
      default: '',
    },
    user: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      model: {
        name: '',
        numbers: '',
        remark: '',
        range: { start: '', end: '' },
        switch: 'number',
        type: this.listType,
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur',
          },
        ],
        switch: [
          {
            required: true,
            message: '请选择类型',
            trigger: 'change',
          },
        ],
        numbers: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur',
          },
        ],
        range: [
          {
            validator: (rule, value, callback) => {
              if (!this.model.range.start || !this.model.range.end) {
                return callback(new Error(rule.message))
              }
              callback()
            },
            message: '请确认号码段是否全部填写完整',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  created() {
    if (this.user.name) {
      this.model = {
        ...this.user,
        numbers: this.user.numbers ? this.user.numbers.join('\n') : '',
        range: this.user.range || { start: '', end: '' },
        switch: this.user.numbers ? 'number' : 'range',
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate()
    },
  },
}
</script>
<style lang="scss" scoped>
.range {
  display: flex;
  .input {
    flex: 1;
  }
}
</style>
